<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三维柱状图</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar{
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
        /*信息窗*/
        #infowin{
            padding: 2px;;
            border: 2px #008acd solid;
            -moz-border-radius: 5px;
            -khtml-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src='../libs/SuperMap.Include.js'></script>
    <script src='./js/graph/Bar3D.js'></script>
    <script src='./data/chinaConsumptionLevel.js'></script>
    <script type="text/javascript">
        var map, local, layer, themeLayer;
        var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
                url = host + "/iserver/services/map-china400/rest/maps/China_4326";
        // 信息框 div
        var infoDom = document.createElement("div");
        infoDom.style.position = "absolute";
        infoDom.id = "infowin";

        function init(){
            // 统计图模块要求浏览器支持 Canvas 渲染
            if(!document.createElement('canvas').getContext){
                alert("您的浏览器不支持 Canvas，请升级！");
                return;
            }

            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});

            // 创建一个三维柱状图（Bar3D）统计专题图图层
            themeLayer = new SuperMap.Layer.Graph("ThemeLayer", "Bar3D");

            // 指定用于专题图制作的属性字段
            themeLayer.themeFields = ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"];

            // 配置图表参数
            themeLayer.chartsSetting = {
                // width，height，codomain 分别表示图表宽、高、数据值域；此三项参数为必设参数
                width: 260,
                height: 120,
                codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
                // 3d 柱条正面样式（3d 柱条的侧面和顶面会以 3d 柱条正面样式为默认样式）
                barFaceStyle: {
                    stroke: true
                },
                // 按字段设置 3d 柱条正面样式
                barFaceStyleByFields: [{ fillColor: "#FFB980" }, { fillColor: "#5AB1EF" }, { fillColor: "#B6A2DE" }, { fillColor: "#2EC7C9" }, { fillColor: "#D87A80" }],
                // 3d 柱条正面 hover 样式（3d 柱条的侧面和顶面 hover 会以 3d 柱条正面 hover 样式为默认 hover 样式）
                barFaceHoverStyle: {
                    stroke: true,
                    strokeWidth: 1,
                    strokeColor: "#ffff00"
                },
                xShapeBlank: [15, 15, 15],   // 水平方向上的空白间距参数
                axisYTick: 4,       // y 轴刻度数量
                useXReferenceLine: true,         // 使用参考线
                xReferenceLineStyle: {strokeColor: "#008acd", strokeOpacity: 0.4},         // 参考线样式
                axisYLabels: ["4万", "3万", "2万", "1万", "0"],         // y 轴标签
                axisXLabels: ["09年", "10年", "11年", "12年", "13年"],       // x 轴标签
                backgroundStyle: {         // 背景样式
                    fillColor: "#d1eeee",
                    shadowBlur: 12,
                    shadowColor: "#d1eeee"
                },
                backgroundRadius: [5, 5, 5, 5]       // 背景框圆角参数
            };

            // 注册专题图 mousemove, mouseout事件(注意：专题图图层对象自带 on 函数，没有 events 对象)
            themeLayer.on("mousemove", showInfoWin);
            themeLayer.on("mouseout", closeInfoWin);

            themeLayer.setOpacity(0.9);
        }

        function addLayer() {
            map.addLayers([layer, themeLayer]);
            map.setCenter(new SuperMap.LonLat(104.067923,34.679943), 2);
        }

        //构建 feature 数据, 专题图的数据必须是 SuperMap.Feature.Vector
        function addThemeLayer() {
            clearThemeLayer();

            var features = [];
            for(var i = 0, len = chinaConsumptionLevel.length; i < len; i++){
                // 省居民消费水平（单位：元）信息
                var provinceInfo = chinaConsumptionLevel[i];
                var geo = new SuperMap.Geometry.Point(provinceInfo[1], provinceInfo[2]);
                var attrs = {};
                attrs.NAME = provinceInfo[0];
                attrs.CON2009 = provinceInfo[3];
                attrs.CON2010 = provinceInfo[4];
                attrs.CON2011 = provinceInfo[5];
                attrs.CON2012 = provinceInfo[6];
                attrs.CON2013 = provinceInfo[7];

                var fea = new SuperMap.Feature.Vector(geo, attrs);
                features.push(fea);
            }

            themeLayer.addFeatures(features);
        }

        // 清除专题图层中的内容
        function clearThemeLayer() {
            themeLayer.clear();
            closeInfoWin();
        }

        // 显示地图弹窗
        function showInfoWin(e){
            // e.target 是图形对象，即数据的可视化对象，三维柱状图中是指三维柱条;
            // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
            // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field 和 value;
            if(e.target && e.target.refDataID && e.target.dataInfo){
                closeInfoWin();
                // 获取图形对应的数据 (feature)
                var fea = themeLayer.getFeatureById(e.target.refDataID);

                var info = e.target.dataInfo;

                // 弹窗内容
                var contentHTML = "<div style='padding: 2px; color: #000; background-color: #d1eeee';'>";
                contentHTML += "<strong>" + fea.attributes.NAME + "</strong>";

                contentHTML += "<hr style='margin: 3px'>";
                switch(info.field){
                    case "CON2009":
                        contentHTML += "09年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                        break;
                    case "CON2010":
                        contentHTML += "10年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                        break;
                    case "CON2011":
                        contentHTML += "11年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                        break;
                    case "CON2012":
                        contentHTML += "12年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                        break;
                    case "CON2013":
                        contentHTML += "13年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                        break;
                    default:
                        contentHTML += "No Data";
                }
                contentHTML += "</div>";

                infoDom.style.left = e.event.clientX + 40 + "px";
                infoDom.style.top = e.event.clientY - 25 + "px";
                infoDom.innerHTML = contentHTML;
                document.body.appendChild(infoDom);
            }
        }

        // 移除信息窗 div
        function closeInfoWin() {
            // infoDom 是否是 body 的子节点
            if(isFatcher(document.body, infoDom)){
                document.body.removeChild(infoDom);
            }
        }
        // 判断父节点
        function isFatcher(p, c){
            while(c.parentNode){
                c = c.parentNode;
                if(c == p)
                    return true;
            }
            return false;
        }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
    <input type="button" class="btn" value="添加专题图" onclick="addThemeLayer()" />
    <input type="button" class="btn" value="清除" onclick="clearThemeLayer()" />
</div>
<div id="map"></div>
</body>
</html>
